<template>
  <div class="dialog_page">
    <el-dialog :title="title" :visible="show" :width="width" :append-to-body="appendtobody" custom-class="glsx_dialog" :close-on-press-escape="false" :close-on-click-modal="false" @close="onCancel">
      <div class="dialog_content">
        <slot />
      </div>
      <div class="dialog_footer" v-show="hasFooter">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'GlsxDialog',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
    width: {
      type: String,
      default: '46%',
    },
    cancel: {
      required: false,
      type: Function,
    },
    confirm: {
      required: false,
      type: Function,
    },
    usefooter: {
      required: false,
      type: Boolean,
      default: false,
    },
    appendtobody: {
      required: false,
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hasFooter: false,
    }
  },
  created() {
    let o = this.$slots
    this.hasFooter = o.footer
  },
  mounted: function () {},
  methods: {
    /**
     * 取消关闭弹框
     */
    onCancel: function () {
      // 兼容以前的页面
      this.$emit('closed')
      this.$emit('close')
    },

    /**
     * 确定
     */
    onConfirm: function () {},
  },
}
</script>

<style lang="scss">
.glsx_dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ddd !important;
    padding-top: 10px;
    font-size: 14px;
  }
  .el-dialog__headerbtn {
    top: 10px;
    right: 10px;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    border-top: 1px solid #ddd;
  }
}
</style>
<style lang="scss" scoped>
.dialog_content {
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
}
.dialog_footer {
  padding: 10px 15px;
  border-top: 1px solid #e1e1e1;
  text-align: right;
}
</style>
